import withGameCanvas from "@/hooks/with-gameCanvas";
import { message as m } from "antd"
const img = {};
const getKgnb: (bool?: boolean) => Promise<HTMLImageElement> = async (bool = true) => {
    const url = `/kgnb${+bool}.png`
    return new Promise((resolve) => {
        if (!!img[url]) return resolve(img[url])
        const _img = new Image()
        _img.src = url
        _img.onload = () => {
            img[url] = _img
            resolve(_img)
        }
    })
}
const wzq = withGameCanvas(
    ({ message, close, send, state, setState, canvas, width, height }) => {
        switch (message.command) {
            case "start":
                setState({
                    data: message.data.board,//当前地图
                    myId: message.pid,//我的id
                    current: message.data.next === message.pid //现在该谁了
                })
                break;
            case "act":
                const [x, y] = message.data
                state.data[x][y] = +(message.next === state.myId)
                state.current = message.next === state.myId
                setState({ ...state })
                break;
            case "win":
                m.info(`您 ${message.pid === state.myId ? "赢" : "输"} 了`)
                setTimeout(() => {
                    window.location.reload()
                }, 2000)
                break;
        }
        canvas.onclick = (e) => {
            const { offsetX, offsetY } = e;
            const [clickX, clickY] = [offsetX - 250, offsetY - 50]
            const bodyWidth = width - 500
            const boxWidth = bodyWidth / 14
            const numParse = (num) => {
                const x = Math.floor(num / boxWidth)
                const y = num % boxWidth
                return x + +(y > boxWidth / 2)
            }
            send({
                command: "act",
                data: [numParse(clickX), numParse(clickY)]
            })
        }
    },
    async ({ state, car, width, height }) => {
        const [playX, playY] = [250, 50]
        const margin = 3;
        const bodyWidth = width - playX * 2;
        const boxWidth = bodyWidth / 14
        car.fillStyle = "#3f51b5"
        car.fillRect(playX, playY, bodyWidth, bodyWidth)
        car.fillStyle = "#000"
        const kgnb1 = await getKgnb()
        const kgnb = await getKgnb(false)
        car.drawImage(state.current ? kgnb : kgnb1, 50, height / 2, 100, 100)
        for (let i = 0; i < 15; i++) {
            car.fillRect(
                playX,
                playY + i * boxWidth,
                bodyWidth,
                margin
            )
            car.fillRect(
                playX + i * boxWidth,
                playY,
                margin,
                bodyWidth
            )
        }
        for (let i = 0; i < 3; i++) {
            for (let j = 0; j < 3; j++) {
                car.beginPath()
                car.arc(
                    playX + i * boxWidth * 4 + boxWidth * 3 + 2,
                    playY + j * boxWidth * 4 + boxWidth * 3 + 2,
                    8,
                    0,
                    2 * Math.PI
                )
                car.fill()
            }
        }
        for (let i = 0; i < state.data.length; i++) {
            for (let j = 0; j < state.data[i].length; j++) {
                const type = state.data[i][j]
                if (type === -1) continue;
                const img = !!type ? kgnb1 : kgnb
                car.drawImage(
                    img,
                    playX + i * boxWidth - boxWidth / 2,
                    playY + j * boxWidth - boxWidth / 2,
                    boxWidth,
                    boxWidth
                )
            }
        }
    },
    2
)
export default wzq

